<template>
	<view class="pageBox">
		<view class="topBox">
			<view class="top flex-row">
				<view class="topL flex-row">
					<image class="avatar" :src="params.avatar" mode=""></image>
					<view class="level flex-center">
						{{ params.serviceLevelName }}
					</view>
				</view>
				<view class="topR">
					<view class="topRTop flex-between">
						<view class="nickname">
							{{ params.nickname }}
						</view>
						<view class="level2">
							{{ params.longVip == 1 ? "VIP（永久）" : params.levelName }}
						</view>
					</view>
					<view class="topRBom flex-row">
						<view class="topRBomItem">
							ID：{{ params.id }}
						</view>
						<view class="topRBomItem">
							{{ mobile }}
						</view>
					</view>
				</view>
			</view>
			<view class="bom">
				<view class="progressBox">
					<view class="title flex-between">
						<view class="titleL">
							分享进度
						</view>
						<view class="titleR">
							已完成{{ params.shareSelfNum }}/{{ params.vipGoodsShare }}
						</view>
					</view>
					<view class="progress">
						<view class="red" :style="{'width':sharePercent,}"></view>
						<view class="percent">
							{{ sharePercent }}
						</view>
					</view>
				</view>

				<view class="progressBox">
					<view class="title flex-between">
						<view class="titleL">
							浏览量
						</view>
						<view class="titleR">
							已浏览{{ params.shareSelfClickNum }}/{{ params.vipShareClickNum }}
						</view>
					</view>
					<view class="progress">
						<view class="red" :style="{'width':broesePercent,}"></view>
						<view class="percent">
							{{ broesePercent }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="swipeBox">
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500"
				:vertical="true">
				<swiper-item v-for="item in userAssignment" :key="item.id">
					<view class="swiperItem flex-row">
						<image class="swiperItemImg" :src="item.avatar" mode=""></image>
						<view class="swiperItemText flex-row">
							<view class="swiperItemTextL oneHidden" v-if="item.mobile">
								手机用户{{ item.mobile.substring(0,3) }}****{{ item.mobile.substr(item.mobile.length - 4) }}
							</view>
							<view class="swiperItemTextL">
								已完成分享任务
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="list">
			<view class="listTitle">
				商品浏览详情
			</view>
			<template v-for="item in shareGoodsWeeks">
				<view class="listItem flex-row" :key="item.id" v-if="item.goods">
				<image class="listItemImg" :src="item.goods.thumbUrl" mode=""></image>
				<view class="listItemR flex">
					<view class="tp flex-between">
						<view class="t oneHidden">
							{{ item.goods.title }}
						</view>
						<view class="p">
							¥{{ item.goods.marketprice }}
						</view>
					</view>

					<view class="num">
						已有{{ item.clickNum }}人浏览过
					</view>
				</view>
			</view>
			</template>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {},
				shareGoodsWeeks: [],
				userAssignment: [],
				mobile: "",
				
			}
		},
		onShow() {
			this.getData();
		},
		computed: {
			sharePercent() {
				let per = parseInt(this.params.shareSelfNum / this.params.vipGoodsShare * 100);
				let percent;
				if(per > 100) {
					percent = "100%";
				} else {
					percent = per + "%";
				}
				return percent;
			},
			broesePercent() {
				let per = parseInt(this.params.shareSelfClickNum / this.params.vipShareClickNum * 100);
				let percent;
				if(per > 100) {
					percent = "100%";
				} else {
					percent = per + "%";
				}
				return percent;
			},
		},
		methods: {
			getData() {
				this.$post({
					module: 'User',
					interface: 10000,
				}).then((res) => {
					console.log(res)
					this.params = res;
					this.shareGoodsWeeks = res.shareGoodsWeeks;
					this.userAssignment = res.userAssignment;
					this.mobile = res.mobile.substring(0,3) + "****" + res.mobile.substr(res.mobile.length-4);
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background-color: #f7f7f7;

		.topBox {
			width: 100%;
			height: 468rpx;
			background-image: url("http://www.bobei.shop/static/third/topHeadBg.png");
			background-repeat: no-repeat;
			background-size: 100% 324rpx;
			position: relative;

			.top {
				width: 100%;
				padding: 24rpx 16rpx 0 30rpx;

				.topL {
					flex-direction: column;

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border: 4rpx solid #FFFFFF;
						border-radius: 50%;
					}

					.level {
						width: 147rpx;
						height: 32rpx;
						font-size: 21rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #F2615F;
						background: #FFFFFF;
						border-radius: 5rpx 5rpx 5rpx 5rpx;
						border: 1px solid #FB673D;
						margin-top: -16rpx;
						z-index: 2;
					}
				}

				.topR {
					padding-left: 32rpx;
					flex: 1;

					.topRTop {
						.nickname {
							font-size: 36rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
						}

						.level2 {
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFFFFF;
						}
					}

					.topRBom {
						margin-top: 20rpx;

						.topRBomItem {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							margin-right: 24rpx;
						}
					}
				}
			}

			.bom {
				width: 690rpx;
				height: 284rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 8rpx 0px rgba(212, 212, 212, 0.25);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translate(-50%, 0);
				padding: 26rpx 20rpx 38rpx 22rpx;

				.progressBox {
					.title {
						.titleL {
							font-size: 32rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: bold;
							color: #000000;
						}

						.titleR {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}

					.progress {
						width: 100%;
						height: 24rpx;
						background: #EEEEEE;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						margin-top: 24rpx;
						position: relative;

						.red {
							height: 24rpx;
							background: linear-gradient(90deg, #F2615F 0%, #FFD2D1 100%);
							border-radius: 12rpx 12rpx 12rpx 12rpx;
						}

						.percent {
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							position: absolute;
							right: 10rpx;
							top: 50%;
							transform: translate(0, -50%);
							z-index: 1;
						}
					}

				}

				.progressBox:nth-last-of-type(1) {
					margin-top: 34rpx;
				}
			}
		}

		.swipeBox {
			width: 92%;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 8rpx 0px rgba(212, 212, 212, 0.25);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 24rpx auto 0;

			.swiper {
				width: 100%;
				height: 100rpx;

				.swiperItem {
					width: 100%;
					height: 100%;
					padding: 22rpx;

					.swiperItemImg {
						width: 56rpx;
						height: 56rpx;
						border-radius: 50%;
					}

					.swiperItemText {
						padding-left: 50rpx;

						.swiperItemTextL {
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}

						.swiperItemTextL:nth-of-type(1) {
							width: 300rpx;
						}

						.swiperItemTextL:nth-last-of-type(1) {
							margin-left: 20rpx;
							white-space: nowrap;
						}
					}
				}
			}
		}

		.list {
			width: 92%;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 8rpx 0px rgba(212, 212, 212, 0.25);
			margin: 24rpx auto 0;
			padding: 24rpx 30rpx 24rpx 22rpx;
			border-radius: 24rpx;

			.listTitle {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.listItem {
				margin-top: 24rpx;
				width: 100%;
				height: 140rpx;
				padding: 10rpx 26rpx 10rpx 24rpx;
				border-radius: 24rpx;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 8rpx 0px rgba(212, 212, 212, 0.25);

				.listItemImg {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.listItemR {
					flex: 1;
					height: 100%;
					padding-left: 22rpx;
					flex-direction: column;
					justify-content: space-between;

					.tp {
						.t {
							width: 292rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: bold;
							color: #000000;
						}

						.p {
							font-size: 22rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #E4883A;
							word-break: break-all;
						}
					}

					.num {
						font-size: 19rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

				}
			}
		}
	}
</style>
